# Loaders

## Installation
`npm i @snack-uikit/loaders`

[Changelog](./CHANGELOG.md)

## Example

```typescript jsx
import { ProgressBar, ProgressBarPage, Spinner, Sun } from "@snack-uikit/loaders";

<ProgressBar
  progress={20}
  size='xs'
/>

<ProgressBarPage
  inProgress={true}
  animationDuration={100}
  incrementDuration={500}
  minimum={0.2}
/>

<Spinner
  size='xs'
/>

<Sun
  size='l'
/>
```

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## ProgressBar
Компонент индикатор загрузки
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| size* | enum ValueOf<{ readonly S: "s"; readonly XS: "xs"; }>: `"s"`, `"xs"` | - | Размер |
| progress* | `number` | - | Процент загрузки от 0 до 100 |
| className | `string` | - | CSS-класс |
## ProgressBarPage
Компонент индикатор загрузки страницы
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| inProgress* | `boolean` | - | Включен/выключен |
| animationDuration | `number` | 200 | Скорость анимации |
| incrementDuration | `number` | 800 | Время между прогрессом |
| minimum | `number` | - | Минимальное значение прогресс бара от 0 до 1 |
| className | `string` | - | CSS-класс |
## Spinner
Компонент спиннер
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| size | enum LoaderSize: `"s"`, `"xs"`, `"m"`, `"l"` | s | Размер |
| className | `string` | - | CSS-класс |
## Sun
Компонент спиннер
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| size | enum LoaderSize: `"s"`, `"xs"`, `"m"`, `"l"` | s | Размер |
| className | `string` | - | CSS-класс |


[//]: DOCUMENTATION_SECTION_END
